import React from 'react';
import { 
    View,
    StyleSheet,
    Text,
    Clipboard,
    TouchableOpacity,
    Image
} from 'react-native'; 
import Evillcons from 'react-native-vector-icons/EvilIcons';
import Toast from 'react-native-root-toast';
import { inject, observer } from 'mobx-react';

@inject((stores) => {
    return {
	  homeStore: stores.rootStore.homeStore
    }
  })
@observer  class RechargeScreen extends React.Component {
    static navigationOptions = {
        title:'充值',
        headerBackTitle: '返回',
        
    };
    constructor(props){
		super(props);
	}
    componentDidMount(){
		this.props.homeStore.getCoinData()
    }
    /**
     * 复制
     */
    _copy = (str) => {  
        Clipboard.setString(str+'');
        Toast.show('复制成功',{
            duration: Toast.durations.LONG,
            position: Toast.positions.CENTER,
            shadow: true,
            animation: true,
            hideOnPress: true,
            delay: 10
        })
    }
    _goRecord = () => {
        // this.props.homeStore.onClosePress();
        this.props.navigation.navigate('Record'); 
    }
  render() {
    return ( 
        <View style={styles.rechargeBox}> 
            <View style={styles.recharge}>
                {/* <View style={styles.closeBox}>
                    <TouchableOpacity onPress={this.props.onClosePress}>
                        <Evillcons name='close' style={styles.iconClose} ></Evillcons>
                    </TouchableOpacity>
                </View> */}
                <View style={styles.tit}>
                    <Evillcons name='credit-card' style={styles.iconCharge} ></Evillcons>
                    <TouchableOpacity onPress={this._goRecord}>
                        <View>
                            <Text xt style={styles.chargeTxt}>充值记录</Text>
                        </View>
                    </TouchableOpacity>
                </View>
                <View style={styles.codeBox}>
                    <Text style={styles.codeTxt}>收款地址</Text>
                    <Image 
                        source={{uri:this.props.homeStore.coin.addressImg}}
                        style={styles.codeImg} />
                </View>
                <View>
                    <Text style={styles.msgTxt}>{this.props.homeStore.coin.address}</Text>
                    <View style={styles.btn}>
                        <TouchableOpacity onPress={()=>this._copy(this.props.homeStore.coin.address)}>
                            <View style={styles.btnBox}>
                                <Text style={styles.btnTxt}>复制地址</Text>
                            </View>
                        </TouchableOpacity>
                    </View>
                </View>
                <View style={styles.notice}>
                    <Text style={styles.noticetxt}>
                        备注：
                    </Text>
                    <Text style={[styles.noticetxt,styles.noticePd]}>
                        &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;1.同一个地址可多次充值，最小充值金额 1000NSS。
                    </Text>
                    <Text style={[styles.noticetxt,styles.noticePd]}>
                        &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;2.发送完成后，系统会自动在此交易获得相应数量确认后将该笔NSS充值到您的钱包账户中。
                    </Text>
                    <Text style={[styles.noticetxt,styles.noticePd]}>
                        &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;3.禁止向该以太坊地址充值NSS和ETH之外的资产，任何充入该地址的非NSS、非ETH资产将不可找回。
                    </Text>
                </View>
            </View>
        </View>
    )
  }
}
const styles = StyleSheet.create({
    rechargeBox:{
        // backgroundColor: 'rgba(232, 229, 229, 0.8)',
        padding: 10,
        borderRadius: 8,
        paddingBottom: 20
    },
    recharge: { 
        // width: 280,
        // backgroundColor:'rgba(232, 229, 229, 0.81)',
        // borderRadius: 15,
    },
    closeBox:{
        display:'flex',
        flexDirection:'row',
        justifyContent:'flex-end',
        paddingRight: 10,
        paddingTop: 10,
    },
    iconClose:{ 
        fontSize: 30,
        color:'#ffffff',
        fontWeight:'bold'
    },
    tit: {
        display:'flex',
        flexDirection:'row',
        justifyContent:'flex-end',
        paddingRight: 20,
        marginTop: 10,
        height: 20
    },
    iconCharge:{
        color:'#FF7F4B',
        fontSize: 20,
    },
    chargeTxt:{
        fontSize: 14,
        color:'#101010'
    },
    codeBox:{
        width:200,
        backgroundColor:'#ffffff',
        marginRight:'auto',
        marginLeft: 'auto',
        textAlign:'center',
        marginTop: 20,
        textAlign:'center',
        display:'flex',
        justifyContent:'space-between',
        padding: 20, 
        alignItems:'center'
    },
    codeTxt:{
        fontSize: 12,
        textAlign:'center',
        color:'#101010',
        marginTop: 20,
        marginBottom: 10,
    },
    codeImg:{ 
        marginRight:'auto',
        marginLeft: 'auto', 
        textAlign:'center',
        width: 120,
        height: 120
    },
    msgTxt:{
        fontSize: 9,
        color:'#101010',
        textAlign:'center',
        marginTop: 20
    },
    btn:{
        marginTop: 20
    },
    btnBox:{
        width: 114,
        height: 30,
        borderRadius: 8,
        backgroundColor:'rgba(255, 127, 75,1)',
        fontSize: 14, 
        marginRight:'auto',
        marginLeft: 'auto', 
    },
    btnTxt:{
        textAlign: 'center',
        color: '#ffffff',
        lineHeight: 30,
        fontSize:14
    },
    notice:{
        marginTop: 10,
        padding: 20, 
        fontSize: 9
    },
    noticetxt:{
        fontSize: 9,
        color:'#FF0000'
    },
    noticePd:{
        
    }
})
export default RechargeScreen;